
import React, { LegacyRef, useEffect, useState } from 'react';
import { observer, useObserver } from 'mobx-react-lite';
import { useStore } from '@/store';

import { Modal, Pagination, Table, message } from 'antd';
import { FliesInfo } from '@/types/apiResType';
import {useAsyncEffect} from 'ahooks'
import { EPageType } from '@/store/fileMagage';
import titleUrl from '@/styles/image/title.png'
import Image from 'next/image'
const { confirm } = Modal;
function AiMceList(props: {}) {
  const store = useStore()
  const [dataSource ,setDataSource]=useState<Array<FliesInfo>>([])
  const [page,setPage]=useState(1)
  const [total,setTotal]=useState(0)
  const [deleteStyle,setDeleteStyle]=useState('');
  useAsyncEffect(async ()=>{
    await store.fileMagage.getFiles(page.toString())
  },[page])
  const sizeChange =async (cur: number, pageSize: number) => {
    setPage(cur);
    await store.fileMagage.getFiles(cur.toString())
  }
  const columns = [
    {
      width: '40%',
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text:string, record:FliesInfo,key:number) =><span className=' text-r1.6 leading-r2.0 truncate flex flex-row'>
        <Image className=' w-r2.0 h-auto mr-r1.0' src={titleUrl} alt=''></Image>

        <a onClick={async ()=>{
        /**设置当前文件id，获取当前文件记录 */
        store.fileMagage.setcurrentfileId(record.id);
        store.fileMagage.setTitle(record.name)
        await store.fileMagage.getRecord(record.id);
        store.fileMagage.pageType=EPageType.editor; 
 
      }}>{text}</a></span> 
    },
    {
      width: '20%',
      title: '字数',
      dataIndex: 'num',
      key: 'num',
    },
    {
      width: '30%',
      title: '修改时间',
      dataIndex: 'update',
      key: 'update',
    },
    {
      width: '10%',
      title: '',
      dataIndex: 'operation',
      key: 'operation',
      render: (text:string, record:FliesInfo) => <>{deleteStyle==record.id?<a 
        className=' text-075bfd'
        onClick={()=>{
        confirm({
          title: '提示',
          content: '确定的删除这个文件？',
          okText:'确定',
          okType: 'danger',
          cancelText:'取消',
          onOk() {
             store.fileMagage.deleteFile(record.id,()=>{
              store.fileMagage.getFiles(page.toString()) 
              message.success('删除成功')
             })
          },
          onCancel() {
            console.log('Cancel');
          },
        });

      }}>删除</a>:null}</>,
    },

  ];
  return (

    <div>
      <div className=' h-r4.0 leading-r4.0 font-bold text-r1.6 pl-r1.0'>
        <span>文件列表</span>
      </div>
      <div>
        <Table 
        rowKey={'id'}
        onRow={(record:FliesInfo) => {
          return { 
            onMouseEnter: (event) => {
              setDeleteStyle(record.id)
            }, // 鼠标移入行
            onMouseLeave: (event) => {
              setDeleteStyle('')
            },
          };
        }}
         pagination={false} 
          scroll={{ y: '75vh' }}
           dataSource={store.fileMagage.filesRes.list} columns={columns} />
        <div className="text-right mt-5" style={{ display: 'flex', justifyContent: 'center' }}>
        <Pagination
          total={store.fileMagage.filesRes.count}
          size='small'
          current={page}
          simple
          pageSize={20}
          // showTotal={() => <div>共{store.fileMagage.filesRes.count}条</div>}
          onChange={sizeChange}
        ></Pagination>
      </div>

      </div>
    </div>

  );
}
export default observer(AiMceList)

